<!--
 * @Author: 丨小小风离丨
 * @Date: 2023-04-28 16:32:49
 * @LastEditTime: 2023-05-25 15:51:19
 * @LastEditors: 丨小小风离丨
 * @Description: 
-->
<template>
  <div>
    <div class="listCls">
      <router-link to="/modelTest/defult">
        <el-button type="primary">defult</el-button>
      </router-link>
      <router-link to="/modelTest/objectDefult">
        <el-button type="primary">objectDefult</el-button>
      </router-link>
      <router-link to="/modelTest/objectFunction">
        <el-button type="primary">objectFunction</el-button>
      </router-link>
      <router-link to="/modelTest/computedAndProxy">
        <el-button type="primary">computedAndProxy</el-button>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  watch: {
    '$route.path': {
      handler(newUrl, oldUrl) {
        if (newUrl === '/modelTest' || (newUrl === '/modelTest/' && oldUrl)) {
          this.$router.push({ path: oldUrl })
        }
      }
    }
  },
  beforeCreate() {
    let path = this.$route.path
    if (path === '/modelTest' || path === '/modelTest/') {
      this.$router.push({ path: '/modelTest/defult' })
    }
  }
}
</script>
<style lang="less" scoped>
.listCls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  a {
    text-decoration: none;
  }
  button {
    margin: 0 20px;
  }
}
</style>
